<template>
  <view class="components-theme">
    <view class="cu-list menu card-menu top">
      <view class="padding flex text-center text-grey bg-white shadow-warp-my">
        <view class="flex flex-sub flex-direction solid-right">
          <view class="text-xxl">监控设备类型 </view>
          <text class="text1">{{monitoring}}<text class="text2">类</text></text>
        </view>
        <view class="flex flex-sub flex-direction">
          <view class="text-xxl">监测设备类型</view>
          <text class="text1">{{watch}}<text class="text2">类</text></text>
        </view>
      </view>
      <view class="line"></view>
      <view class="cu-item" v-for="(item,index) in deviceTypeCount">
        <text class="text-lg">{{item}}</text>
      </view>
    </view>

    <view class="cu-list menu card-menu bottom">
      <view class="text3">
        <view>
          <text class="text4">监控设备</text>
        </view>
        <view class="charts-box1">
          <qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
        </view>
      </view>
    </view>

    <view class="cu-list menu card-menu bottom">
      <view class="text3">
        <view>
          <text class="text4">监测设备</text>
        </view>
        <view class="charts-box1">
          <qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { equipmentList } from "@/api/equipment.js";
export default {
  data() {
    return {
			recordListData:{},
			monitoring:"",
			watch:"",
			deviceTypeCount:"",
      chartData1: {},
      chartData2: {},
			opts1:{},
			opts2:{},
    };
  },
	watch:{
	recordListData:function(newVal){
		this.monitoring = newVal.equipmentTypeAndQuantity.monitoring
		this.watch = newVal.equipmentTypeAndQuantity.watch
		this.deviceTypeCount = newVal.deviceTypeCount
	}	
	},
  onReady() {
    this.getEquipmentList();
  },
  methods: {
    getEquipmentList() {
      equipmentList()
        .then((result) => {
          this.recordListData = result.data;					
				let	options1 = {
					  rotate: false,
					  rotateLock: false,
					  color: ["#49B683", "#343434"],
					  padding: [30, 30, 44, 48],
					  dataLabel: false,
					  legend: {
					    show: true,
					    position: "right",
					    lineHeight: 30,
					    left: 20,
					    fontSize: 14,
					  },
					  title: {
					    name: Number(this.recordListData.monitorCount.y[0]) + Number(this.recordListData.monitorCount.y[1]) + "个",
					    fontSize: 30,
					    color: "#49B683",
					  },
					  subtitle: {
					    name: "",
					  },
					  extra: {
					    ring: {
					      ringWidth: 10,
					      activeOpacity: 0.1,
					      activeRadius: 0,
					      labelWidth: 20,
					      border: true,
					      borderWidth: 5,
					      borderColor: "#FFFFFF",
					      offsetAngle: -90,
					    },
					    tooltip: {
					      showBox: false,
					    },
					  },
					}
					
			let	options2 = {
					  rotate: false,
					  rotateLock: false,
					  color: ["#185F9A", "#343434"],
					  padding: [30, 30, 44, 48],
					  dataLabel: false,
					  legend: {
					    show: true,
					    position: "right",
					    lineHeight: 30,
					    left: 20,
					    fontSize: 14,
					  },
					  title: {
					    name: Number(this.recordListData.watchCount.y[0]) + Number(this.recordListData.watchCount.y[1]) + "个",
					    fontSize: 30,
					    color: "#185F9A",
					  },
					  subtitle: {
					    name: "",
					  },
					  extra: {
					    ring: {
					      ringWidth: 10,
					      activeOpacity: 0.1,
					      activeRadius: 0,
					      labelWidth: 20,
					      border: true,
					      borderWidth: 5,
					      borderColor: "#FFFFFF",
					      offsetAngle: -90,
					    },
					    tooltip: {
					      showBox: false,
					    },
					  },
					}
					
					
					
					let res1 = {
					  series: [
					    {
					      data: [
					        { name: this.recordListData.monitorCount.x[0] + ':' + Number(this.recordListData.monitorCount.y[0]), value: Number(this.recordListData.monitorCount.y[0])},
					        { name: this.recordListData.monitorCount.x[1] + ':' + Number(this.recordListData.monitorCount.y[1]), value: Number(this.recordListData.monitorCount.y[1])},
					      ],
					    },
					  ],
					};
					let res2 = {
					  series: [
					    {
					      data: [
					        { name: this.recordListData.watchCount.x[0] + ':' + Number(this.recordListData.watchCount.y[0]), value: Number(this.recordListData.watchCount.y[0]) },
					        { name: this.recordListData.watchCount.x[1] + ':' + Number(this.recordListData.watchCount.y[1]), value: Number(this.recordListData.watchCount.y[1]) },
					      ],
					    },
					  ],
					};
					this.chartData1 = JSON.parse(JSON.stringify(res1));
					this.chartData2 = JSON.parse(JSON.stringify(res2));
					this.opts1 = options1;
					this.opts2 = options2;
					
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.components-theme {
  .top {
    border-top: 5px solid #eba533;
    background-color: white;
    .text-xxl {
      display: inline-block;
      font-size: 28rpx;
      color: #343434;
      margin-top: 30rpx;
    }
    .text1 {
      font-size: 60rpx;
      font-style: italic;
      margin-top: 10rpx;
      margin-left: 10rpx;
      color: #329395;
      .text2 {
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
    .line {
      width: 100%;
      height: 2rpx;
      border-top: 2rpx solid #e5e5e5;
    }
    .cu-item {
      background-color: #fafafa;
      margin: 34rpx 32rpx;
      .text-lg {
        color: #343434;
        font-size: 28rpx;
        .text2 {
          font-size: 36rpx;
          font-style: italic;
          font-weight: 600;
        }
      }
    }
  }
  .bottom {
    .text3 {
      background-color: #ffffff;
      padding-bottom: 40rpx;
      .text4 {
        display: block;
        line-height: 80rpx;
        padding-left: 22rpx;
        background-image: url(../../../static/images/fenxi/jx01.png);
        background-size: 178rpx 80rpx;
        background-repeat: no-repeat;
        color: #185f9a;
        font-size: 32rpx;
        font-weight: 700;
      }
    }
  }
}
</style>
